import Vue from 'vue'
// 1. 如果使用模块化机制编程，导入Vue和VueRouter，要调用 Vue.use(VueRouter)
import VueRouter from 'vue-router' // 注册插件

// 2. 导入需要进行路由的组件
import login from '@/views/login/index.vue'
import register from '@/views/register/index.vue'
import layout from '@/views/layout/index.vue'
import detail from '@/views/detail/index.vue'
import notFound from '@/views/404.vue'
// 二级页面组件
import article from '@/views/article/index.vue'
import like from '@/views/like/index.vue'
import collect from '@/views/collect/index.vue'
import user from '@/views/user/index.vue'

Vue.use(VueRouter)

// 3. 定义路由规则
const routes = [

  // {
  //   path: '/login',
  //   name: 'login',
  //   component: () => import('@/views/login')
  // }
  // 如果url没有hash值，就重定向到莫个页面组件
  { path: '/', redirect: '/login' }, // 一个对象就是一条路由规则
  { path: '/login', component: login }, // 一个对象就是一条路由规则
  { path: '/register', component: register },
  // { path: '/layout', component: layout },
  {
    path: '/layout',
    component: layout,
    children: [
      {
        path: 'article',
        component: article
      },
      {
        // path: 'like',
        // 二、三... 路由中的path的值有两种写法：1. 前面不加"/"  2. 前面加"/"，那就必须把所有hash值写全
        path: '/layout/like',
        // path: 'like',
        component: like
      },
      {
        path: 'collect',
        component: collect
      },
      {
        path: 'user',
        component: user
      }
    ]
  },
  { path: '/detail', component: detail },
  // 匹配上面没有匹配到的所有hash值，并重定向到404页面
  { path: '*', redirect: '/404' },
  { path: '/404', component: notFound }
]

// 4. 创建 router 实例，然后传 `routes` 配置
const router = new VueRouter({
  routes // (缩写) 相当于 routes: routes
})

export default router
